<template>
  <div class="index">
    <div class="top-content">
      <div class="video-content" @click="videoClick">
        <iframe 
          :src="src" 
          width="750" 
          height="500" 
          allowfullscreen 
          v-if="this.$store.state.videoFlag  && this.videoFlag" 
          class="video-iframe"
        ></iframe>
      </div>
      <div class="map-content">
        <x-map 
          :userInfo="$store.state.userInfo"   
          :ohtersInfo="$store.state.othersInfo"   
          v-if="$store.state.mapFlag" 
          class="map-component"
        />
      </div>
    </div>
    <div class="bottom-content">
      <div class="button-container">
  <el-row :gutter="20" class="button-row">
    <el-col :span="8">
      <el-button 
        @click="buttonClick('weatherstation')"
        class="dashboard-button"
        icon="el-icon-cloudy-and-sunny">
        气象站 
      </el-button>
    </el-col>
    <el-col :span="8">
      <el-button 
        @click="buttonClick('soil')"
        class="dashboard-button"
        icon="el-icon-coin">
        土壤指标 
      </el-button>
    </el-col>
    <el-col :span="8">
      <el-button 
        @click="buttonClick('greenhouse')"
        class="dashboard-button"
        icon="el-icon-office-building">
        温室参数 
      </el-button>
    </el-col>
  </el-row>
  <el-row :gutter="20" class="button-row">
    <el-col :span="8">
      <el-button 
        @click="buttonClick('crops')"
        class="dashboard-button"
        icon="el-icon-grape">
        农作物参数 
      </el-button>
    </el-col>
    <el-col :span="8">
      <el-button 
        @click="buttonClick('video')"
        class="dashboard-button"
        icon="el-icon-video-camera">
        现场监控 
      </el-button>
    </el-col>
    <el-col :span="8">
      <el-button 
        @click="buttonClick('brain')"
        class="dashboard-button"
        icon="el-icon-cpu">
        智慧大脑 
      </el-button>
    </el-col>
  </el-row>
      </div>
      
      <div class="warning-container">
        <x-warning class="warning-component"/>
      </div>
    </div>  
  </div>
</template>
 
<script>
import XMap from './XMap.vue' 
import XWarning from './Warning.vue' 
 
export default {
  components: {
    XMap, XWarning 
  },
  data() {
    return {
      videoFlag: false 
    }
  },
  computed: {
    src() {
      return "https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/"  + 
        this.$store.state.userInfo.cameraList[0].deviceSerial  + "/" + 
        this.$store.state.userInfo.cameraList[0].channelNo  + 
        ".live&autoplay=1&accessToken=" + 
        this.$store.state.userInfo.accessToken  
    }
  },
  methods: {
    videoClick() {
      this.videoFlag  = true;
    },
    brainClick() {
      this.$router.push('/brain'); 
    },
    buttonClick(index) {
      this.$router.push('/'+index); 
    }
  },
  deactivated() {
    this.videoFlag  = false;
  }
}
</script>
 
<style scoped>
.index {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
 
.top-content {
  display: flex;
  height: 500px;
  margin-bottom: 20px;
  gap: 20px;
}
 
.video-content {
  background: url("../../assets/img/index-video.jpg"); 
  background-size: cover;
  background-position: center;
  cursor: pointer;
  width: 750px;
  min-width: 750px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
 
.video-iframe {
  border: none;
  width: 100%;
  height: 100%;
}
 
.map-content {
  flex: 1;
  min-width: 0;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
 
.map-component {
  width: 100%;
  height: 100%;
}
 
.bottom-content {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 20px;
}
 
.button-container {
  width: 690px;
  min-width: 690px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
 
.dashboard-button {
  width: 100%;
  height: 100px;
  font-size: 20px;
  color: #333;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
 
.dashboard-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  background: linear-gradient(145deg, #f7f7f7, #e8e8e8);
}
 
.dashboard-button i {
  font-size: 28px;
  margin-bottom: 8px;
  color: #409EFF;
}
 
.dashboard-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
 
.button-row {
  margin-bottom: 20px;
}
 
.button-row:last-child {
  margin-bottom: 0;
}
 
.button-container {
  width: 690px;
  min-width: 690px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
 
.el-button {
  width: 100%;
  height: 100%;
  font-size: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.warning-container {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
 
.warning-component {
  width: 100%;
  height: 100%;
}
</style>